<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏</title>
		<style type="text/css">
			.nav a {
				display: inline-block;
				width: 120px;
				height: 60px;
				background-color: #00FFFF;
				/* 去除默认下划线 */
				text-decoration: none;
				color: #fff;
				/* 使文字居中对齐 */
				text-align: center;
				line-height: 60px;
			}

			.nav .bg1 {
				background: url(imgs/bg1.jpg) no-repeat;
			}

			.nav .bg1:hover {
				background-image: url(imgs/bg01.jpg);
			}

			.nav .bg2 {
				background: url(imgs/bg2.jpg) no-repeat;
			}

			.nav .bg2:hover {
				background-image: url(imgs/bg02.jpg);
			}

			.nav .bg3 {
				background: url(imgs/bg3.jpg) no-repeat;
			}

			.nav .bg3:hover {
				background-image: url(imgs/bg03.jpg);
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="#" class="bg1">五彩导航</a>
			<a href="#" class="bg2">五彩导航</a>
			<a href="#" class="bg3">五彩导航</a>
		</div>
	</body>
</html>
